
window.addEventListener('load', function () {
    var wrapper = document.querySelector('.wrapper')
    var ul = document.querySelector('.ul')
    var asides = document.querySelectorAll('.aside')


    for (var i = 0; i < wrapper.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i)
        ul.appendChild(li);
        li.addEventListener('click', function () {
            for (var i = 0; i < wrapper.children.length; i++) {
                ul.children[i].className = '';
            }
            this.className = 'active';
            var index = this.getAttribute('index');
            console.log(index)
            wrapper.style.transform = 'translate(-' + index * 1.6 + 'rem)'
        })
    }
    ul.children[(Math.floor((wrapper.children.length - 1) / 2))].className = 'active';
    wrapper.style.transform = 'translate(-' + (wrapper.children.length - 1) / 2 * 1.6 + 'rem)'

})
